.button-type(@type, @bg, @fc, @ripple-color: rgba(0, 0, 0, 0.1)) {
  &-@{type} {
    background-color: @bg;
    color: @fc;

    &::before {
      background-color: @ripple-color;
    }

    &::after {
      border-color: @bg;
    }

    &-disabled,
    &:disabled {
      background-color: @bg!important;
      color: @fc!important;
    }

    &.@{prefix}-button-text::after {
      border-color: transparent;
    }

    // 边框颜色

    @outlined-color: if((@type = default), @text-secondary, @bg);
    &.@{prefix}-button-text,
    &.@{prefix}-button-outlined {
      background: transparent;
      color: @outlined-color;

      &::before {
        background-color: @outlined-color;
        opacity: 0.1;
      }
    }

    &.@{prefix}-button-outlined::after when(@type=default) {
      border-color: @text-secondary;
    }

    & .@{prefix}-button_spin {
      border-right-color: @fc;
      border-top-color: @fc;
      border-bottom-color: @fc;
    }
  }
}

.button-size() {
  @sizes: small, normal, large;
  // @paddings: @spacing-small / 2, @spacing-normal / 2, @spacing-large / 2;
  @paddings: 12rpx, 16rpx, 20rpx;
  @font-sizes: @text-size-small, @text-size-normal, @text-size-large;

  each(@sizes, {
    &-@{value} {
      padding: extract(@paddings, @index) @spacing-normal;
      font-size: extract(@font-sizes, @index);
    }
  });
}
